<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Event</title>
    <script src="../dist/quark-renderer.js"></script>
</head>
<body>
    <div id="main" style="width:1024px;height:800px;"></div>
    <script type="text/javascript">
        var qr = QuarkRenderer.init(document.getElementById('main'));
        var circle1 = new QuarkRenderer.Circle({
            position:[30,30],
            shape: {
                cx:30,
                cy:30,
                r: 30
            },
            style: {
                fill: 'blue'
            },
            draggable: true
        });

        var circle3 = new QuarkRenderer.Circle({
            position:[30,100],
            shape: {
                cx:30,
                cy:30,
                r: 30
            },
            style: {
                fill: '#ccc'
            },
            draggable: true
        });

        var circle2 = new QuarkRenderer.Circle({
            position:[300,300],
            shape: {
                cx:100,
                cy:100,
                r: 100
            },
            draggable: true
        });

        circle1.on('mouseover', function () {
            qr.host.style.cursor = 'move';
        });
        circle1.on('mouseout', function () {
            qr.host.style.cursor = 'default';
        });

        circle2.on('dragenter', function () {
            this.attr({style:{fill:'red'}});
        }).on('dragleave', function () {
            this.attr({style:{fill:'black'}});
        }).on('drop', function () {
            this.attr({style:{fill:'green'}});
        });

        qr.add(circle2);
        qr.add(circle1);
        qr.add(circle3);

        qr.eventDispatcher.on("click",function(event){
            console.log(event);
        });

        circle2.on("click",function(event){
            console.log(event);
        })
    </script>
</body>
</html>